<template>
  <div>
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="数据统计" name="sjtj">
        <el-row>
          <el-col :span="18">
            <div style="width:100%;text-align:center">
              <h1>茅山各村常非公有制社会组织数量</h1>
            </div>
            <div align="center" id="histogram" style="width:100%; height:900px"></div>
          </el-col>
          <el-col :span="6">
            <div class="tjInfo">
              <h2 style="padding:12px">数据统计</h2>
              <div style="padding:5px">
                 <table  class="userInfoEditTable" style="border-collapse:collapse;background-color:white;" width="100%" cellspacing="0">
                    <tr>
                      <td>地区</td>
                      <td>非公有制社会组织</td>
                    </tr>
                    <tr v-for="(v,index) in area" :key="v" :class="index%2==0?'mycolor':''">
                      <td>{{v}}</td>
                      <td>{{areaData[index]}}</td>
                    </tr>
                    <tr class="mycolor">
                      <td>合计</td>
                      <td>{{getCount(areaData)}}</td>
                    </tr>
                  </table>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="数据检索" name="sjjs">
        <el-row>
          <el-col :span="$store.getters.user.userRole=='超级管理员'?3:0">
             <tree-component @GetNodeValue="GetNodeValue"></tree-component>
          </el-col>
          <el-col :span="$store.getters.user.userRole=='超级管理员'?21:24">
            <el-row>
              <el-col :span="8">
                <el-button @click="exportData" style="float:left;" type="success">
                  <img src="../../assets/daoru.png" alt=""> 导出
                </el-button>
                <el-upload action="xxxxxxxxxx" style="text-align:left;display:inline-block;width:150px;height:38px;overflow: hidden;margin-left:10px">
                  <el-button type="success">
                    <img src="../../assets/daochu.png" alt=""> EXCEL导入
                  </el-button>
                </el-upload>
              </el-col>
              <el-col :span="16">
                <div align="right">
                  <el-button type="primary" @click="addSocialOrg">
                    <i class="el-icon-plus">添加非公有制社会组织</i>
                  </el-button>
                  <el-input style="width:200px" v-model="filters.name" placeholder="组织名称"></el-input>
                  <el-select v-model="filters.type" placeholder="请输入组织类型">
                    <el-option v-for="v in Types" :key="v.id" :value="v.societyOrgTypeValue" :label="v.societyOrgTypeName"></el-option>
                  </el-select>
                  </el-select>
                  <el-button type="primary" icon="search" @click="getSocialOrgInfo()">查询</el-button>
                  <el-button type="primary" @click="showAll">显示所有</el-button>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24" style="padding-top:10px">
                <el-table :data="dataList" style="width:100%">
                  <el-table-column style="width:50px" label="统一社会信用代码 " prop="enterpriseUSCcode" align="center">
                  </el-table-column>
                  <el-table-column label="社会组织名称" prop="societyOrgName" align="center">
                  </el-table-column>
                  <el-table-column label="法人姓名" prop="headerName" align="center">
                  </el-table-column>
                  <el-table-column label="负责人姓名" prop="responsiblePersonName" align="center">
                  </el-table-column>
                  <el-table-column label="负责人联系方式" prop="responsiblePersonContact" align="center">
                  </el-table-column>
                  <el-table-column label="办公地址" prop="officeAddress" align="center">
                  </el-table-column>
                  <el-table-column label="操作" align="center">
                    <template scope="scope">
                      <el-button type="text" @click="watchDetail(scope.row.enterpriseUSCcode)" size="small">查看详情</el-button>
                      <el-button type="text"  size="small" @click="editInfo(scope.row.enterpriseUSCcode)">编辑</el-button>
                      <el-button type="text"  size="small" @click="deleteOrg(scope.row.enterpriseUSCcode)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
              <el-col :span="24" style="margin-top:10px" align="right">

                <el-pagination layout="prev, pager, next" :total="totalInfo" :current-page="currentPage" @current-change="handleCurrentChange">
                </el-pagination>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>


    <el-dialog top="5%" title="查看详情" :visible.sync="visible">
      <info :id="id"></info>
    </el-dialog>
  </div>
</template>

<script>
import treeComponent from "../../components/common/treeComponent";
import * as api from "@/api/orgManage";
import info from "./socialOrgInfo";
export default {
  components: {
    treeComponent: treeComponent,
    info:info
  },
  data() {
    return {
      activeName: "sjtj",
      histogram: null,
      filters: {
        // 查询表单
        name: null,
        type: null,
        netGridID: null,
        page: 1, // 页码
        pageSize: 10 // 页号
      },
      totalInfo: 0, // 页码总数
      dataList: [],
      area: [],
      areaData: [],
      Types: [],
      currentPage:1,
      id:"1",
      visible:false
    };
  },
  methods: {
    GetNodeValue(id){
       this.filters.netGridID = id
       this.getSocialOrgInfo()
    },
    deleteOrg(id) {
      this.$confirm("是否删除此人记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          api.deleteSocietyOrg(id).then(res => {
            if (res.data) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getSocialOrgInfo()
            }else{
              this.$message({
                type: "error",
                message: "删除失败!"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    watchDetail(id) {
      this.id = id;
      this.visible = true;
      // let that = this;
      // this.$store.commit('SET_PAGE',{name:'L',index:that.filters.page});
      // this.$router.push({ path: "socialOrgInfo", query: { id: id } });
    },
    editInfo(id) {
      let that = this;
      this.$store.commit('SET_PAGE',{name:'L',index:that.filters.page});
      this.$router.push({ path: "editSocialOrgInfo", query: { id: id } });
    },
    addSocialOrg() {
      this.$router.push("addSocialOrg");
    },
    getCount(data) {
      let sum = 0;
      for (let i = 0; i < data.length; i++) {
        sum += data[i];
      }
      return sum;
    },
    showAll() {
      this.filters.name = this.filters.type =  null;
      this.getSocialOrgInfo();
    },
    exportData() {
      // 导出数据
    },
    // 翻页
    handleCurrentChange(val) {
      this.filters.page = val;
      this.getSocialOrgInfo();
    },
    // 绘制柱状图
    drawHistogram(area, datas) {
      this.histogram = echarts.init(document.getElementById("histogram"));
      this.histogram.setOption({
        color: ["#EE4000"],
        title: {
          text: "当前各村非公有制社会组织数量"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        legend: {
          data: area
        },
        xAxis: [
          {
            type: "category",
            data: area,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "非公有制社会组织数量",
            type: "bar",
            barWidth: "50%",
            data: datas
          }
        ]
      });
    },
    getSocialOrgInfo() {
      api.fetchSocietyOrgInfo(this.filters).then(res => {
        this.dataList = res.data.societyOrgInfos;
        this.totalInfo = res.data.p.totalCount;
      });
      this.filters.name = this.filters.type = null;
    },
    initChart() {
      api.getSocietyOrgHistogram().then(res => {
        this.area = res.data[0];
        this.areaData = res.data[1];
        this.drawHistogram(this.area, this.areaData);
      });
    }
  },
  mounted() {
    this.$store.commit("INIT_PAGE","L");
    this.filters.page = this.$store.getters.page['L'];
    this.currentPage = this.filters.page;

    if(this.$store.getters.user.userRole!='超级管理员')
      this.filters.netGridID = this.$store.getters.user.netGridID
    this.initChart();
    this.getSocialOrgInfo();
    api.getOrgCode().then(res => {
      this.Types = res.data.codeSocietyOrgTypeValue;
    });
  }
};
</script>

<style scoped>
.tjInfo {
  /* margin-top: 50px; */
  background-color: aliceblue;
  width: 100%;
  height: 800px;
  padding: 10px;
  /* text-indent: 2em; */
}
.userInfoEditTable,
.userInfoEditTable td {
  /* font-size: 8px; */
  border: 1px solid darkgrey;
  padding: 10px;
  text-align: center;
}
</style>
